<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>个人信息</title>
<link rel="shortcut icon" type="image/x-icon"
	href="assets/img/favicon.ico">
<!-- CSS 
    ========================= -->
<!--bootstrap min css-->
<link rel="stylesheet"
	href="https://www.jq22.com/jquery/bootstrap-4.2.1.css">
<!--owl carousel min css-->
<link rel="stylesheet" href="assets/css/owl.carousel.min.css">
<!--slick min css-->
<link rel="stylesheet" href="assets/css/slick.css">
<!--magnific popup min css-->
<link rel="stylesheet" href="assets/css/magnific-popup.css">
<!--font awesome css-->
<link rel="stylesheet"
	href="https://www.jq22.com/jquery/font-awesome.4.7.0.css">
<!--ionicons css-->
<link rel="stylesheet" href="assets/css/ionicons.min.css">
<!--linearicons css-->
<link rel="stylesheet" href="assets/css/linearicons.css">
<!--animate css-->
<link rel="stylesheet" href="assets/css/animate.css">
<!--jquery ui min css-->
<link rel="stylesheet" href="assets/css/jquery-ui.min.css">
<!--slinky menu css-->
<link rel="stylesheet" href="assets/css/slinky.menu.css">
<!--plugins css-->
<link rel="stylesheet" href="assets/css/plugins.css">
<!-- Main Style CSS -->
<link rel="stylesheet" href="assets/css/style.css">
<!--modernizr min js here-->
<script src="assets/js/vendor/modernizr-3.7.1.min.js"></script>
</head>
<body>
	<c:if test="${requestScope.orders==null}">
		<c:redirect url="OrdersServlet?op=queryByUsers"></c:redirect>
	</c:if>
	<jsp:include page="head.jsp"></jsp:include>
	<!--header area end-->

	<!--breadcrumbs area start-->
	<div class="breadcrumbs_area">
		<div class="container">
			<div class="row">
				<div class="col-12">
					<div class="breadcrumb_content">
						<h3>我 的 账 户</h3>
						<ul>
							<li><a href="index.html">首页</a></li>
							<li>我的账户</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!--breadcrumbs area end-->

	<!-- my account start  -->
	<section class="main_content_area">
		<div class="container">
			<div class="account_dashboard">
				<div class="row">
					<div class="col-sm-12 col-md-3 col-lg-3">
						<!-- Nav tabs -->
						<div class="dashboard_tab_button">
							<ul role="tablist" class="nav flex-column dashboard-list">

								<li><a href="#orders" data-toggle="tab"
									class="nav-link active">订单</a></li>
								<li><a href="#account-details" data-toggle="tab"
									class="nav-link">修改用户信息</a></li>
								<li><a href="#downloads" data-toggle="tab" class="nav-link">下载</a></li>
								<li><a href="#address" data-toggle="tab" class="nav-link">我的钱包</a>
								</li>

								<li><a href="userlogin.jsp" class="nav-link">注销</a></li>
							</ul>
						</div>
					</div>
					<div class="col-sm-12 col-md-9 col-lg-9">
						<!-- Tab panes -->
						<div class="tab-content dashboard_content">

							<div class="tab-pane fade show active" id="orders">
								<h3>订单</h3>
								<div class="order_table table-responsive">
									<table class="table">
										<thead>
											<tr>
												<th>订单编号</th>
												<th>订单状态</th>
												<th>下单时间</th>
												<th>送达时间</th>
												<th>商家</th>
												<th>卖家联系方式</th>
												<th>总计</th>
												<th>查看订单详情</th>
											</tr>
										</thead>
										<tbody>

											<c:if test="${requestScope.orders!=null}">
												<c:forEach items="${requestScope.orders}" var="orders">
													<tr>
														<th>${orders.orderid}</th>
														<th>${orders.orderstatus}</th>
														<th>${orders.starttime}</th>
														<th>${orders.endtime}</th>
														<th>${orders.store}</th>
														<th>${orders.storecall}</th>
														<th>${orders.total}</th>
														<th><a href="#" class="details">查看订单详情</a>|<a
															href="#" class="addComment">评价</a></th>
													</tr>
												</c:forEach>
											</c:if>
										</tbody>
									</table>
								</div>
							</div>
							<div class="tab-pane fade" id="downloads">
								<h3>资料下载</h3>
								<div class="table-responsive">
									<table class="table">
										<thead>
											<tr>
												<th>产品</th>
												<th>资料下载</th>
												<th>过期</th>
												<th>下载</th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td>Shopnovilla-免费房地产PSD模板</td>
												<td>2018年5月10日</td>
												<td><span class="danger">已过期</span></td>
												<td><a href="#" class="view">单击此处下载文件</a></td>
											</tr>
											<tr>
												<td>有机-电子商务HTML模板</td>
												<td>2018年9月11日</td>
												<td>已下载</td>
												<td><a href="#" class="view">单击此处下载文件</a></td>
											</tr>
										</tbody>
									</table>
								</div>
							</div>
							<div class="tab-pane" id="address">
								<h4 class="billing-address">我的余额：</h4>

								<h3>
									<strong>0.00元</strong>
								</h3>
								<input type="button" value="充值" class="button">
							</div>
							<div class="tab-pane fade" id="account-details">
								<h3>修改用户信息</h3>
								<div class="login">
									<div class="login_form_container">
										<div class="account_login_form">
											<form action="#">

												<label>用户名</label> <input type="text" name="username">
												<div class="input-radio">
													<span class="custom-radio"><input type="radio"
														value="1" name="id_gender"> 先生.</span> <span
														class="custom-radio"><input type="radio" value="1"
														name="id_gender"> 女士.</span>
												</div>

												<label>密码</label> <input type="password" name="userpwd">

												<label>联系方式</label> <input type="text" name="usercall">

												<label>地址</label> <input type="text" placeholder="市/县/街"
													value="" name="address">

												<div class="save_button primary_btn default_button">
													<button type="submit">确定</button>
												</div>
											</form>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
	<!-- my account end   -->

	<!--footer area start-->
	<jsp:include page="footer.jsp"></jsp:include>

	<!-- 引入layui.js文件 -->
	<script src="layui/layui.js" charset="utf-8"></script>
	<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
	<script>
		//给查看订单详情超链接设置了类class,作用希望我们可以定位a标签，同时完成其单击事件
		$(".details").click(function() {
			//单击事件的代码	  
			//0得到这行 的第一个td中的typeid的值,我们使用js(jq)的一些方法来操作页面元素
			//$(this).parents("tr") 当前行
			//find("td") 这个tr下的所有td
			//eq(0) 所有td中的第一个
			//text() ->innerText td中的文本内容
			var orderid = $(this).parents("tr").find("td").eq(0).text();

			//弹出层
			//订单详情
			layer.open({
				orderid : orderid,
				area : [ '600px', '400px' ],
				content : $('#ordersdetailsdiv') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
				,
				cancel : function() {
					//右上角关闭回调
					//return false 开启该代码可禁止点击该按钮关闭
				}
			});
		})
		/**********查看订单详情结束********/

		/**********添加评价开始********/

		//给查看订单详情超链接设置了类class,作用希望我们可以定位a标签，同时完成其单击事件
		$(".addComment").click(function() {
			//单击事件的代码	  
			//0得到这行 的第一个td中的typeid的值,我们使用js(jq)的一些方法来操作页面元素
			//$(this).parents("tr") 当前行
			//find("td") 这个tr下的所有td
			//eq(0) 所有td中的第一个
			//text() ->innerText td中的文本内容
			var orderid = $(this).parents("tr").find("td").eq(0).text();

			//增加评价
			layer.open({
				orderid : orderid,
				area : [ '600px', '400px' ],
				content : $('#addCommentdiv') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
				,
				cancel : function() {
					//右上角关闭回调
					//return false 开启该代码可禁止点击该按钮关闭
				}
			});

		})
		/**********添加评价结束********/
	</script>



	<div class="ordersdetailsdiv table-responsive">
		<c:if test="${orderdetailLise!=null}">
			<c:forEach items="${orderdetailLise}" var="orderdetail">
				<tr>
					<th>${orderdetail.orderid}</th>
					<th>${orderdetail.orderstatus}</th>
					<th>${orderdetail.starttime}</th>
					<th>${orderdetail.endtime}</th>
					<th>${orderdetail.store}</th>
					<th>${orderdetail.storecall}</th>
					<th>${orderdetail.total}</th>
				</tr>
			</c:forEach>
		</c:if>
	</div>

	<div class="addComment table-responsive">
		<form>
			<label class="custom-radio">订单编号</label>
			<div class="input-radio">
				<input type="text" name="orderid" id="orderid"
					value="${users.address}" class="layui-input">
			</div>
			<label class="custom-radio">评价</label>
			<div class="input-radio">
				<select class="select_option" name="judge" id="judge">
					<option value="好评">好评</option>
					<option value="中评">中评</option>
					<option value="差评">差评</option>
				</select>
			</div>
			<label class="custom-radio">评价内容</label>
			<div class="input-radio">
				<textarea id="content" name="content" placeholder=""></textarea>
			</div>
			<div class="payment_method">
				<div class="order_button">
					<button type="submit">提交评价</button>
				</div>
			</div>
		</form>

		<script>
			//Demo
			layui.use('form', function() {
				var form = layui.form;

				//监听提交
				form.on('submit(formDemo)', function(data) {

					//可以1 表单提交  2 可以用ajax
					//得到了表单 中的数据,传递给servlet完成数据访问即可
					//未完， 待  "大家" 续

					layer.msg(JSON.stringify(data.field));

					//return false是不做表单提交
					return false;
				});
			});
		</script>
	</div>


</body>
</html>